<template>
  <div class="ai-Import-Data">
    <common-Form
      v-if="tableHeight"
      :fieldsList="aaaField"
      :hideTable="false"
      :table-head="firstTableHead"
      :hidePagination="false"
      ref="vip_tableForm"
      :defaultData="defaultData"
      :tableHeight="tableHeight"
      :tableUrl="'/vip/list'"
    >
      <template v-slot:phonenum="scope" >
        <div>
          <el-button class="table-btn" type="text"
                @click="phoneDetailOpenHandle(scope.scope.row)">{{scope.scope.row.phonenum}}</el-button>
        </div>
      </template>
      <template v-slot:formBtn>
        <div style="text-align: right;width: 100%;">
          <el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
        </div>

<!--        <el-button type="primary" size="mini" @click="model_manage" style="margin: 10px">模型管理</el-button>-->
        <el-button
            type="primary"
            icon="el-icon-upload2"
            size="mini"
            @click="handleImport"
            style="margin-left: 20px"
        >导入</el-button>
<!--        <el-popover-->
<!--          icon="el-icon-info"-->
<!--          icon-color="red"-->
<!--          placement="right"-->
<!--        >-->
<!--          <div>-->
<!--            <el-date-picker-->
<!--              v-model="exportDate"-->
<!--              type="daterange"-->
<!--              value-format="yyyy-MM-dd HH:mm:ss"-->
<!--              range-separator="-"-->
<!--              placeholder="请选择日期"-->
<!--              start-placeholder="开始日期"-->
<!--              end-placeholder="结束日期">-->
<!--            </el-date-picker>-->
<!--          </div>-->
<!--&lt;!&ndash;          <div style="margin-top: 10px;text-align: right">&ndash;&gt;-->
<!--&lt;!&ndash;            <el-button size="mini" type="primary" @click="handleExport">导出</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--          <el-button-->
<!--            type="primary"-->
<!--            icon="el-icon-download"-->
<!--            size="mini"-->
<!--            style="margin-left: 20px"-->
<!--            slot="reference"-->
<!--          >导出</el-button>-->
<!--        </el-popover>-->

      </template>
    </common-Form>
    <Publicize ref="PublicizeDialog"></Publicize>
    <common-Dialog ref="PhoneDetailDialogRef" :customClass="'warn_rate_table-dialog'">
      <template v-slot:content>
        <common-Form
          :fieldsList="[]"
          :hideTable="false"
          :table-head="detailTableHead"
          :hidePagination="false"
          ref="phoneDetailTableFormRef"
          :defaultData="[]"
          :tableUrl="'/vip/detail_list'"
          :tableHeight="360"
          :customTableParams="{phonenum: phonenum}"
        >
        </common-Form>
      </template>
      <template v-slot:footer>
        <div style="padding: 0;">
          <el-button type="primary" @click.stop="addWhiteHandle"><i class="el-icon-circle-plus-outline"></i>加入白名单</el-button>
          <el-button type="primary" @click.stop="disposeHandle"><i class="el-icon-paperclip"></i> 处置</el-button>
          <el-button type="info" @click.stop="closePhoneDetailDialog">关闭</el-button>
        </div>
      </template>
    </common-Dialog>
    <common-Dialog ref="Model_table" :customClass="'Model_table-dialog'">
      <template v-slot:content>
        <common-Form
          :fieldsList="aaaField"
          :hideTable="false"
          :table-head="ModelHead"
          :hidePagination="false"
          ref="edit_tableForm"
          :defaultData="ModelList"
        >
        </common-Form>
      </template>
      <template v-slot:footer>
        <div style="padding: 0px;">
          <el-button type="primary" @click.stop="closeModelDialog">关闭</el-button>
        </div>
      </template>
    </common-Dialog>
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
          ref="upload"
          :limit="1"
          accept=".xlsx, .xls"
          :action="upload.url + '?updateSupport=' + upload.updateSupport"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import commonDialog from '@/components/commonDialog/common.dialog'
import commonForm from '@/components/commonForm/commonForm.component'
import _ from "lodash";
import * as request from '@/utils/request/request'
import Publicize from "@/components/customComponents/PublicizeDialog.component.vue";
import Api from "@/api/index.api";

export default {
  name: 'aiImportData',
  components: {
    Publicize,
    commonDialog,
    commonForm,
  },
  data () {
      return {
        tableHeight: 0,
        phonenum: [],
        exportDate: [],
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
        /*  headers: { Authorization: "Bearer " + getToken() },*/
          // 上传的地址
          url: request.baseURL + "/vip/importCashData"
        },
        aaaField: [
          {
            type: 'text',
            code:'keyWord'
          },
        ],
        ModelHead: [
          {
            prop: 'model',
            label: '模型'
          },
          {
            prop: 'descrption',
            label: '描述'
          },
          {
            prop: 'state',
            label: '状态'
          },
        ],
        ModelList: [{
          'model': 'warn_num>=3',
          'descrption': '近三个月预警次数大于三',
          'state': '已启用',
        },{
          'model': 'cash>=500,000',
          'descrption': '现金取现大于50万',
          'state': '已启用'
        },{
          'model': 'gold>=500',
          'descrption': '黄金取现大于500克',
          'state': '已启用'
        }
        ],
        firstTableHead: [
          {
            prop: 'name',
            label: '姓名'
          },
          {
            prop: '诈骗类型',
            label: '诈骗类型'
          },
          {
            prop: '诈骗类型',
            label: '模型类型'
          },
          {
            prop: '时间',
            label: '时间'
          },
          {
            prop: '备注',
            label: '备注  '
          },
          // {
          //   prop: 'edit',
          //   label: '操作'
          // },
        ],
        detailTableHead: [
          {
            prop: 'name',
            label: '姓名',

          },
          {
            prop: 'phonenum',
            label: '手机号',
            width: 150

          },
          // {
          //   prop: 'warn_num',
          //   label: '手机预警次数'
          // },{
          //   prop: 'unhandle_num',
          //   label: '预警未处理次数'
          // },
          {
            prop: 'idcard',
            label: '身份证',
            width: 180
          },
          {
            prop: 'bankcard_num',
            label: '银行卡'
          },
          {
            prop: 'reason',
            label: '中标模型'
          },
          {
            prop: 'create_time',
            label: '取现时间'
          }, {
            prop: 'point',
            label: '网点'
          }, {
            prop: 'status',
            label: '处置状态'
          }, {
            prop: 'remark',
            label: '处置结果'
          },
          // {
          //   prop: 'edit',
          //   label: '操作'
          // },
        ],
        defaultData: [{
          'name': '**',
          'phonenum': '******',
          'idcard': '******',
          'age': '65',
          'job': '退休',
          'address': '上海市普陀区长寿路***',
          'type': '退休人员',
          'state': '未宣传',
          'station': '长寿路派出所',
          'detail': '',
          'warn_time': '2024-11-02 20:00:00',
        },{
          'name': '**',
          'phonenum': '******',
          'idcard': '******',
          'age': '20',
          'job': '大学生',
          'address': '上海市普陀区长寿路***',
          'type': '在校大学生',
          'state': '未宣传',
          'station': '长寿路派出所',
          'detail': '',
          'warn_time': '2024-11-02 20:00:00',
        },{
          'name': '**',
          'phonenum': '******',
          'idcard': '******',
          'age': '36',
          'job': '全职太太',
          'address': '上海市普陀区长寿路***',
          'type': '家庭主妇',
          'state': '未宣传',
          'station': '长寿路派出所',
          'detail': '',
          'warn_time': '2024-11-02 20:00:00',
        },{
          'name': '**',
          'phonenum': '******',
          'idcard': '******',
          'age': '48',
          'job': '财务主管',
          'address': '上海市普陀区长寿路***',
          'type': '财务',
          'state': '未宣传',
          'station': '长寿路派出所',
          'detail': '',
          'warn_time': '2024-11-02 20:00:00',
        }]

      }
  },
  methods: {
    handleExport () {
      if (this.exportDate && this.exportDate.length) {
        Api.exportVipWarnList(this.exportDate)
      }
    },

    detail(e, row){
      this.$refs.PublicizeDialog.title= '查看详情'
      //this.$refs.DataCheck.getTabDate(row)
      this.$refs.PublicizeDialog.tableData= row
      this.$refs.PublicizeDialog.dialogFormVisible= true

    },

    model_manage (){
        this.$refs.Model_table.open({title: '详情', width: '60%'})
    },
    phoneDetailOpenHandle (row){
      this.phonenum = row.phonenum
      this.$refs.PhoneDetailDialogRef.open({title: '详情', width: '85%'})
      this.$nextTick(()=>{
        this.$refs.phoneDetailTableFormRef.getTableData()
      })
    },
    disposeHandle () {
      this.$prompt('备注', '处置', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value: remark }) => {
        Api.vip_handle({phonenum: this.phonenum, remark}).then(res=>{
          let type = 'error'
          if (res.code === 200) {
            type = 'success'
            this.$refs.PhoneDetailDialogRef.close()
            this.$refs.vip_tableForm.getTableData()
          }
          this.$message({
            type: type,
            message: res.msg
          });
        })
      })
    },
    addWhiteHandle () {
      Api.add_white({phonenum: this.phonenum}).then(res=>{
        let type = 'error'
        if (res.code === 200) {
          type = 'success'
          this.$refs.PhoneDetailDialogRef.close()
          this.$refs.vip_tableForm.getTableData()

        }
        this.$message({
          type: type,
          message: res.msg
        });
      })
    },
    closePhoneDetailDialog () {
      this.$refs.PhoneDetailDialogRef.close();
    },
    closeModelDialog () {
      this.$refs.Model_table.close();
    },
     handleQuery() {
       let params = _.clone(this.$refs.vip_tableForm.form)
       this.$refs.vip_tableForm.getTableData(params)
    },
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("导入成功");
      this.$refs.vip_tableForm.getTableData()
    },
    submitFileForm() {
      this.$refs.upload.submit();
    },
    handleImport() {
      this.upload.title = "取现导入";
      this.upload.open = true;
    },

  },
  created() {

  },
  mounted () {
    this.tableHeight = document.querySelector('.ai-Import-Data').getBoundingClientRect().height - 100;
  }
}
</script>
<style lang="stylus">
  .ai-Import-Data{
    height: 100%;
    pointer-events: auto;
    .common-form-wrap {
      height: 100%;
    }
  }
</style>
